<template>
  <ModalVue v-if="notifyConfig.show" width="300px" height="200px">
    <div class="notify h-100 flex flex-col gr-4 core-animate">
      <div class="core-head">
        <div> {{ notifyConfig.title || '无标题' }}</div>
        <div class="icon-button" @click="notifyConfig.show = false">
          <img :src="close" width="16" />
        </div>
      </div>
      <div class="content flex-1 flex flex-s px-12">
        {{ notifyConfig.msg }}
      </div>
      <div class="footer flex justify-between">
        <CoreButton @click="onCancle">取消</CoreButton>
        <button class="core-button linear-gradient" @click="onComfirm">
          确定
        </button>
      </div>
    </div>
  </ModalVue>
</template>

<script setup lang="ts">
  import close from '@/assets/images/close.png';
  import CoreButton from '@/views/components/button/CoreButton.vue';
  import ModalVue from '../modal/Modal.vue';
  import { resetConfig, notifyConfig } from './bus';

  const onCancle = () => {
    if (notifyConfig.value.onCancle) {
      notifyConfig.value.onCancle();
    }
    resetConfig();
  };

  const onComfirm = () => {
    if (notifyConfig.value.onComfirm) {
      notifyConfig.value.onComfirm();
    }
    resetConfig();
  };
</script>

<style lang="scss" scoped>
  .notify {
    padding: 8px;
    border-radius: var(--radius);
    overflow: hidden;
    .content {
      background-color: #eee;
      border-radius: var(--radius);
    }
  }
  button.cancle {
    background-color: #eee;
    color: #999;
    &:hover {
      color: #333;
    }
  }
</style>
